<template>
	<view style="margin: 4%;">
		<uni-search-bar bgColor="white" placeholder="请输入用户昵称" @confirm="search" @cancel="reset" @clear="reset" />
		<view v-for="(user,index) in userInfoList" :key="index"
			style="display: flex;justify-content: space-between;margin-top: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #C0C0C0;padding-bottom: 20rpx;">
			<view style="display: flex;">
				<view><img style="width: 80rpx;height: 80rpx;border-radius: 80rpx;" :src="user.userAvatar" alt="">
				</view>
				<view style="margin-left: 20rpx;">
					<view>{{user.userUsername}}</view>
					<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">{{user.userPhone}}</view>
				</view>
			</view>
			<view style="text-align: center;">
				<view style="color: #808080;">{{user.depName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userRequest: {
					pageNo: 0,
					pageSize: 10,
					orgId: null,
					username: null
				},
				userInfoList: [],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.userRequest.orgId = option.orgId;
			this.getUserList()
		}, // 监听下拉刷新动作
		onPullDownRefresh() {
			this.userRequest.pageNo = 0;
			this.userInfoList = [];
			// 重新获取数据
			this.getUserList()
			// 结束下拉刷新
			setTimeout(function() {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getUserList() {
				this.userRequest.pageNo++;
				this.$http.request({
					url: '/organizations/web/user/userList',
					method: 'POST',
					data: this.userRequest
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.userInfoList = [
							...this.userInfoList,
							...res.data
						]
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			},
			// 搜索
			search(res) {
				this.userRequest.username = res.value;
				this.userRequest.pageNo = 0;
				this.userInfoList = [];
				this.getUserList();
			},
			// 重置
			reset() {
				this.userRequest.pageNo = 0;
				this.userRequest.username = null;
				this.userInfoList = [];
				this.getUserList()
			},
			// 页面下拉到底部
			onReachBottom() {
				// 当前页+1
				this.getUserList()
			}
		}
	}
</script>

<style>
</style>
